<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="fields">
    <h3>Account Information</h3>

    <table align="center">
        <tr>
            <td>First name:</td>
            <td><input type="text" th:field="*{firstName}" name="firstName" value="${sessionScope.account.firstName}"/></td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td><input type="text" th:field="*{lastName}"  name="lastName" value="${sessionScope.account.lastName}"/></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><input type="text" th:field="*{email}" size="40" name="email" value="${sessionScope.account.email}"/></td>
        </tr>
        <tr>
            <td>Phone:</td>
            <td><input type="text" th:field="*{phone}" name="phone" value="${sessionScope.account.phone}"/></td>
        </tr>
        <tr>
            <td>Address 1:</td>
            <td><input type="text" th:field="*{address1}" size="40" name="address1" value="${sessionScope.account.address1}"/></td>
        </tr>
        <tr>
            <td>Address 2:</td>
            <td><input type="text" th:field="*{address2}"  size="40" name="address2" value="${sessionScope.account.address2}"/></td>
        </tr>
        <tr>
            <td>City:</td>
            <td><input type="text" th:field="*{city}" name="city" value="${sessionScope.account.city}"/></td>
        </tr>
        <tr>
            <td>State:</td>
            <td><input type="text" th:field="*{state}" size="4" name="state" value="${sessionScope.account.state}"/></td>
        </tr>
        <tr>
            <td>Zip:</td>
            <td><input type="text" th:field="*{zip}" size="10" name="zip" value="${sessionScope.account.zip}"/></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" th:field="*{country}" size="15" name="country" value="${sessionScope.account.country}"/></td>
        </tr>
    </table>

    <h3>Profile Information</h3>

    <table align="center">
        <tr>
            <td>Language Preference:</td>
            <td style="text-align:center;vertical-align:middle;"><select th:field="*{languagePreference}" name="languagePreference">
                <option th:each="language:${LANGUAGE_LIST}" th:value="${language}" th:text="${language}"></option>
            </select></td>
        </tr>
        <tr>
            <td>Favourite Category:</td>
            <td style="text-align:center;vertical-align:middle;"><select th:field="*{favouriteCategoryId}" name="favouriteCategoryId">
                <option th:each="categoryId:${CATEGORY_LIST}" th:value="${categoryId}" th:text="${categoryId}"></option>
            </select></td>
        </tr>
        <tr>
            <td>Enable MyList</td>

            <td style="text-align:center;vertical-align:middle;">
               <input type="checkbox" th:field="*{ListOption}">
            </td>
        </tr>
        <tr>
            <td>Enable MyBanner</td>

            <td style="text-align:center;vertical-align:middle;">
                <input type="checkbox" th:field="*{bannerOption}">
            </td>
        </tr>

    </table>

</div>
</body>
</html>